<template>
    <div class="roll_area" v-if="$utils.isNotEmpty(img_url)">
        <div class="img_area">
            <img :src="img_url" alt ref="rollImage"/>
            <div class="scaleStep">
                <el-input v-model="scaleStep" class="scaleStep_input"></el-input>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'ImageRoll',
        props: {
            imgId: {
                type: String,
                default () {
                    return '';
                }
            }
        },
        data () {
            return {
                img_url: '',
                scaleStep: 100,
                size: {
                    w: 0,
                },
                pos: {move: false, curr_l: 0, curr_r: 0, move_l: 0, move_r: 0},
            };
        },
        watch: {
            imgId () {
                this.initData();
            },
        },
        created () {
            this.size = $.extend({}, this.size, {
                w: $('.roll_area').width(),
            });
            if (this.$utils.isNotEmpty(this.imgId)) {
                this.initData();
            }
        },
        methods: {
            initData () {
                // this.img_url = fileApi.url.getFile + this.imgId;
                this.img_url = 'http://47.100.25.94:10000/mxapi/file/file/' + this.imgId;
                this.$nextTick(() => {
                    this.initEvent();
                });
            },
            initEvent() {
                let _this = this;
                let img_area = $('.img_area');
                img_area.on('mousedown mouseup mouseout ousewheel DOMMouseScroll', 'img', function (ev) {
                    ev.preventDefault()
                });
                img_area.on('mousedown', function (ev) {
                    _this.handleDown(ev, this);
                });
                img_area.on('mouseup', function (ev) {
                    _this.handleUp(ev, this);
                });
                img_area.on('mouseout', function (ev) {
                    _this.handleUp(ev, this);
                });
                img_area.on("mousewheel DOMMouseScroll", function (e) {
                    _this.rollImg(e);
                });
            },
            handleDown ($event, that) {
                let _this = this;
                _this.pos = $.extend({}, _this.pos, {
                    off_l: $(that).offset().left,
                    off_t: $(that).offset().top,
                    md_x: $event.pageX,
                    md_y: $event.pageY,
                    move: true,
                });
                $(document).on('mousemove', function (ev) {
                    _this.handleMove(ev, that);
                })
            },
            handleMove ($event, that) {
                let _this = this;
                if (!_this.pos.move) {
                    return;
                }
                _this.pos = $.extend({}, _this.pos, {
                    curr_l: $event.pageX - _this.pos.off_l - _this.pos.md_x + _this.pos.off_l + _this.pos.move_l,
                    curr_r: $event.pageY - _this.pos.off_t - _this.pos.md_y + _this.pos.off_t + _this.pos.move_r,
                });
                $(that).find('img').css({'left': _this.pos.curr_l, 'top': _this.pos.curr_r});
            },
            handleUp() {
                let _this = this;
                _this.pos.move = false;
                _this.pos = $.extend({}, _this.pos, {
                    move_l: _this.pos.curr_l,
                    move_r: _this.pos.curr_r,
                });
                $(document).off('mousemove');
            },
            rollImg (e) {
                e.preventDefault();
                let delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                    (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
                if (delta > 0) {
                    this.size.w += parseInt(this.scaleStep);
                    $('.img_area').find('img').width(this.size.w)
                } else if (delta < 0) {
                    if (this.size.w <= 200) {
                        return;
                    }
                    this.size.w -= parseInt(this.scaleStep);
                    $('.img_area').find('img').width(this.size.w)
                }
                return false;
            },
        },
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .roll_area {
        user-select: none;
        overflow: hidden;

        .img_area {
            width: 100%;
            position: relative;
            border: 1px solid #bbb;
            height: 400px;
            overflow: hidden;
            cursor: move;

            img {
                width: 100%;
                display: block;
                border: none;
                position: absolute;
                top: 0;
                left: 0;
                user-select: none;
                transition: width .4s;
            }

            .scaleStep {
                position: absolute;
                top: 20px;
                right: 20px;
                padding: 10px 16px;
                background-color: #fff;
                box-shadow: 4px 4px 14px rgba(0, 0, 0, .3);
                overflow: hidden;

                &::before {
                    content: "设置步进：";
                    float: left;
                    font-size: 14px;
                    color: #666;
                    line-height: 30px;
                    margin-right: 4px;
                }

                .scaleStep_input {
                    float: left;
                    width: 80px;
                    height: 30px;
                    font-size: 14px;
                }
            }
        }
    }
</style>
